<template>
	<view class="container">
		<!-- 提交加载 开始-->
		<u-loading-page :loading="pageLoading" loading-mode="spinner" loading-color="#FFFFFF" icon-size="36" font-size="12" color="#FFFFFF" loading-text="Loading···" bg-color="#00000050"></u-loading-page>
		<!-- 提交加载 结束-->
		<view class="heard">
			<view class="heardTitle">
				<text>积分商城</text>
			</view>
		</view>
		<view class="main">
			<view class="tishi" v-if="show">
				<view class="mainCase">
					<view class="mainCaseImg">
						<image class="mainCaseGJ" src="https://www.afbeijing.net/static_resources/assets/jfdh1.png" />
					</view>
				</view>
				<view class="mainCaseText">
					<text>兑换成功，可点击头像查看!</text>
				</view>
			</view>
			<view class="tishi" v-else>
				<view class="mainCase2">
					<view class="mainCaseImg2">
						<image class="mainCaseGJ2" src="https://www.afbeijing.net/static_resources/assets/jfdh2.png" />
						<view class="mainCaseInfo">
							<text>积分不足</text>
						</view>
					</view>
				</view>
				<view class="mainCaseText">
					<text>兑换失败，继续加油攒积分哦~</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageLoading:false,
				show: true
			}
		},
		methods: {
			qiehuan(){
				this.show = !this.show
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";

	.container {
		position: relative;
		background-color: #F2F2F2;
		height: 100vh;
	}

	.heard {
		width: 750rpx;
		height: 242rpx;
		background: #FFB607;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.heardTitle {
		padding-top: 20%;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 59rpx;
	}


	.main {
		padding-left: 80rpx;
		padding-right: 80rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tishi{
		display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  height: 100%;
	}
	.mainCase {
		width: 240rpx;
		height: 240rpx;
		background: #3CAB7E;
		border-radius: 40rpx;
		margin-top: 80rpx;
		text-align: center;
	}

	.mainCaseImg {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.mainCaseGJ {
		height: 75rpx;
		width: 107rpx;
	}
	.mainCase2 {
		width: 240rpx;
		height: 240rpx;
		background: #808080;
		border-radius: 40rpx;
		margin-top: 80rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.mainCaseImg2 {
		height: 100%;
		padding-top: 30%;
	}
	.mainCaseGJ2 {
		height: 65rpx;
		width: 91rpx;
	}
	.mainCaseInfo{
		padding-top: 10rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 30rpx;
	}
	.mainCaseText{
		margin-top: 50rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #808080;
		line-height: 30rpx;
		text-align: center;
	}
</style>